import React, { useState } from "react";
import Immer from './immer/immer.jsx';
import Small from './small/small.jsx';
import Destroy from './destroy/destroy.jsx';
import ReducerComponent from './reducerComponent/reducerComponent.jsx';
import ContextComponent from './contextComponent/contextComponent.jsx';

import { Button } from 'antd';
import './app.less';

function App() {
  const [ show, setShow ] = useState(true);
  return (
    <div className="app">
      {/* 引用类型值改变，渲染页面 */}
      <Immer />
      {/* 小坑 */}
      <Small />
      {/* 组件销毁，导致状态重置 */}
      <Button onClick={() => setShow(!show)}>隐藏/展开</Button>
      { show? <Destroy /> : null }
      {/* reducerComponent */}
      <ReducerComponent />
      {/* contextComponent */}
      <ContextComponent />
    </div>
  )
}

export default App;